<template>
	<div class="home">
		<!-- 背景图 -->
		<img src="../assets/background.png" class="bgp">
		<!-- 头部 -->
		<div class="title">
			<p style="background-color: rgba(0,0,0,0);">MNIST Handwritten Digit Recognition
			<!-- 画横线 -->
			<div style="width:500px;height:1px;margin-top:-20px;background-color:#fff;overflow:hidden;"></div>
			</p>
		</div>
		<!-- 左部 -->
		<div class="left">
			<p style="font-size:45px">Describe and submit your tasks</p>
			<input type="button" name="" value="SCLECT" class="btn bt1">
			<input type="button" name="" value="SUBMIT" class="btn bt2">
		</div>
		<!-- 中间部分 -->
		<div class="middle">
			<div class="con1">
				<p style="padding-left:30px">Misson Details</p>
				<ul>
					<li>The mission is to achieve multi-classification of handwritten numbers 0 to 9 by training MNIST data sets through neural networks.</li>
				</ul>
			</div>
			<div class="con2">
				<p style="padding-left:30px">Dataset Requirements</p>
				<ul>
					<li>Handwritten digital dataset, each image is a single number from 0 to 9.</li>
					<li>image has a label.</li>
				</ul>
			</div>
		</div>
		<div>
			<img src="../assets/图片2.png" class="picture2">
		</div>
  </div>
</template>

<style scoped>

.picture2{
	position: absolute;
	top: 150px;
	right: 100px;
	border: 1px solid white;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 130px;
}
.left{
	position: absolute;
	width: 30%;
	height: 40%;
	left: 3%;
	top: 20%;
	padding: 20px;
	background-color: rgba(0,0,0,0);
}
.middle{
	width: 40%;
	
}
.con1{
	position: absolute;	
	left: 500px;
	width: 40%;
	top: 150px;
	font-size: 20px;
	z-index: 2;
	background-color: rgba(0,0,0,0);
}
.con2{
	position: absolute;
	width: 40%;
	left: 500px;
	top: 350px;
	font-size: 20px;
	z-index: 2;
	background-color: rgba(0,0,0,0);
}
	
</style>